<template>
	<view class="content">
		<view class="head">
			<view class="head-item" v-for="(item,index) in headData" :key="index">
				<view>{{item.num}}</view>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="divider">
			<view>
				<view>
					<view>积分明细</view>
					<view @click="toPointsMall">积分商城</view>
				</view>
				<view>
					温馨提示：平台积分有效期为12个月，每年12月31号清零
				</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in listData" :key="index">
			<view>
				<view>{{item.title}}</view>
				<view>{{item.content}}</view>
			</view>
			<view>{{item.date}}</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	export default {
		setup() {
			let data = reactive({
				headData: [{
					title: '可用积分',
					num: 60000
				}, {
					title: '累计积分',
					num: 600000
				}, {
					title: '今日获得',
					num: 500
				}, ],
				listData:[{
					title:'每日签到',
					content:'+1000积分',
					date:'2020-11-30 12:00'
				},{
					title:'每日签到',
					content:'+1000积分',
					date:'2020-11-30 12:00'
				},{
					title:'每日签到',
					content:'+1000积分',
					date:'2020-11-30 12:00'
				},{
					title:'每日签到',
					content:'+1000积分',
					date:'2020-11-30 12:00'
				},{
					title:'每日签到',
					content:'+1000积分',
					date:'2020-11-30 12:00'
				},],
				toPointsMall() {
					uni.navigateTo({
						url:'../../jifen/jifen'
					})
				}
			})
			return {
				...toRefs(data)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.head {
		display: flex;
		justify-content: space-between;
		background-color: #79A1FA;
		padding: 30rpx 60rpx 80rpx;
	}

	.head-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #EAFFFF;
		font-size: 26rpx;
	
	>view {
			margin-bottom: 10rpx;
		}
	}

	.divider {
		height: 150rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #E4E4E4;
		position: relative;
	
	>view {
			height: 190rpx;
			width: 90%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background-color: #FFFFFF;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			display: flex;
			flex-direction: column;
			padding: 15rpx;
			box-sizing: border-box;
			justify-content: space-between;
			>view:nth-of-type(1) {
				display: flex;
				justify-content: space-between;
				>view {
					margin: 0 40rpx;
					font-size: 28rpx;
				}
			}
			>view:nth-of-type(2) {
				font-size: 26rpx;
				color: #FFA847;
			}
		}
	}
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 40rpx;
		border-bottom: 1px solid #F2F2F2;
		border-top: 1px solid #F2F2F2;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #999999;
		>view:nth-of-type(1) {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			>view:nth-of-type(1) {
				color: #666666;
				margin-bottom: 15rpx;
			}
		}
	}
</style>
